{% extends "base.html" %}
{% block extrajs %}
{{ super() }}
{% autoescape false %}
<script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({

            chart: {
                renderTo: 'container',
                type: 'column'
            },

            title: {
                text: '{{ title }}'
            },

            subtitle: {
                text: 'Previous {{ months }} months: {{ total }} {{ card_type }}'
            },

            xAxis: {
                categories: {{ chart['categories']|jsonencode }}
            },

            yAxis: {
                title: {
                    text: 'Cards'
                },

                labels: {
                    formatter: function() {
                        return this.value;
                    }
                }
            },

            tooltip: {
                formatter: function() {
                    return ''+
                        this.x + ' days: '+ Highcharts.numberFormat(this.y, 0, ',') +' cards';
                }
            },

            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key} days</span><div>',
                pointFormat: '<span style="color:{series.color};padding:0">{series.name}: </span>' +
                    '<span><b>{point.y} cards</b></span><br />',
                footerFormat: '</div>',
                shared: true,
                useHTML: true
            },

            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },

            series: [
                {% for seri in chart['series'] %}
                {
                    name: {{ seri['name']|jsonencode }},
                    data: {{ seri['data']|jsonencode }},
                }{% if not loop.last %},{% endif %}
                {% endfor %}
            ]
        });
    });
});</script>
{% endautoescape %}
{% endblock extrajs %}

{% block content %}

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

<div id="wip_data">
{% if error %}
    <h3>{{ error }}</h3>
{% else %}
<table>
    <tr>
    	<th>Cycle Time</th>
    	<th>Number of cards</th>
        <th>% of cards</th>
    </tr>

    {% for row in histogram_data %}
    <tr class="{{ loop.cycle('odd', 'even') }}">
    	<td>{{ row.days }}</td>
    	<td>{{ row.count }}</td>
        <td>{{ "%.0f%%"|format(row.percent*100) }}</td>
    </tr>
    {% endfor %}
</table>
{% endif %}

</div>
{% endblock content %}